@require './config'
@require './nprogress'
@require './code'
@require './custom-blocks'
@require './arrow'

// new theme vuesax
.pruebax
  background: rgb(21, 16, 184);
  padding: 10px;
  margin: 20px;
  color: rgb(212, 155, 122);

@font-face {
  font-family: "OpenSans";
  src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Regular.otf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "MontserratThin";
  src: url("../fonts/MONTSERRAT-EXTRALIGHT.OTF");
  font-weight: normal;
  font-style: normal;
}

.examplex, .demo
  .vs-switch, .vs-button
    margin 3px

.centerx {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.leftx {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  flex-direction: column
}

*
  font-family: OpenSans , arial
  // color rgb(91, 87, 119)

h1,h2,h3,h4,h5,h6
  font-family: MontserratThin
  // color rgb(91, 87, 119)

p
  // color rgb(91, 87, 119)
 color:rgb(160, 158, 174)

b
  font-family: Montserrat !important

// @font-face {
//   font-family: 'Material Icons';
//   font-style: normal;
//   font-weight: 400;
//   src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v17/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
// }
.con-home {
  overflow: hidden
}
// .material-icons {
//   font-family: 'Material Icons' !important;
//   font-weight: normal;
//   font-style: normal;
//   font-size: 24px;
//   line-height: 1;
//   letter-spacing: normal;
//   text-transform: none;
//   display: inline-block;
//   white-space: nowrap;
//   word-wrap: normal;
//   direction: ltr;
//   -webkit-font-feature-settings: 'liga';
//   -webkit-font-smoothing: antialiased;
// }
.modelx {
  padding: 5px;
  padding-left:10px;
  padding-right:10px;
  background: rgb(245, 245, 245);
  display: inline-block
  border-radius:5px;
}
*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  display: block
}
*::-webkit-scrollbar-thumb {
  background: #e4eaf5;
  border-radius: 5px;
}
*::-webkit-scrollbar-thumb:hover
  background: rgb(196, 201, 211)
.sidebar
  .c-sidebar::-webkit-scrollbar
    width: 0px !important
.sidebar
  .c-sidebar
    padding-right: 5px
  &:hover
    .c-sidebar
      padding-right: 0px

.sidebar:hover
  .c-sidebar::-webkit-scrollbar
    width: 5px !important

.gridx
  .vs-row
    border-top 1px solid rgb(210,210,210)
    &:last-child
      border-bottom 1px solid rgb(210,210,210)
  .vs-col
    color rgb(150,150,150)
    // padding 7px
    background rgb(245, 245, 245)
    border-left 1px solid rgb(210,210,210)
    p
      background transparent !important
      padding 7px !important

    &:last-child
      border-right 1px solid rgb(210,210,210)
    h3
      font-weight lighter
      font-size 16px !important
      a
        display none


.con-alignment .vs-col:nth-child(3)
  height 130px
.demo
  margin-top 10px

// new theme vuesax

html, body
  padding 0
  margin 0

body
  font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  font-size 15px
  color $textColor

.page
  padding-left $sidebarWidth
  margin-right: 16.5rem
  border-right 1px solid rgba(0,0,0,.05)

.navbar
  position fixed
  z-index 20
  top 0
  left 0
  right 0
  height $navbarHeight
  background-color #fff
  box-sizing border-box

  // vuesax
  transition all .3s ease
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.0);

.sidebar-mask
  position fixed
  z-index 9
  top 0
  left 0
  width 100vw
  height 100vh
  display none

.sidebar
  font-size 14px
  background-color #F5F7FB
  width $sidebarWidth
  position fixed
  z-index 1010
  margin 0
  top $navbarHeight
  left 0
  bottom 0
  box-sizing border-box
  overflow-y auto

  //vuesax
  // box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.040)
  // border-right 1px solid $borderColor
.content:not(.custom)
  max-width $contentWidth
  margin 0 auto
  padding-top: $navbarHeight
  // padding 5rem 1.5rem
  // width: calc(100% - 160px)
  > *:first-child
    margin-top $navbarHeight
  a:hover
    text-decoration underline
  p.demo
    padding 1rem 1.5rem
    border 1px solid #ddd
    border-radius 4px
  img
    max-width 100%

.content.custom
  padding 0
  margin 0

a
  font-weight 500
  color $accentColor
  text-decoration none

p a code
  font-weight 400
  color $accentColor

kbd
  background #eee
  border solid 0.15rem #ddd
  border-bottom solid 0.25rem #ddd
  border-radius 0.15rem
  padding 0 0.15em

blockquote
  font-size 1.2rem
  color #999
  border-left .25rem solid #dfe2e5
  margin-left 0
  padding-left 1rem

ul, ol
  padding-left 1.2em

strong
  font-weight 600

.content > h1 strong
  display none

h1, h2, h3, h4, h5, h6
  font-weight 600
  line-height 1.25
  .content:not(.custom) > &
    margin-top (0.5rem - $navbarHeight)
    padding-top ($navbarHeight + 1rem)
    margin-bottom 0
    &:first-child
      margin-top -1.5rem
      margin-bottom 1rem
      + p, + pre, + .custom-block
        margin-top 2rem
  &:hover .header-anchor
    opacity: 1
    transform: translate(0px)

h1
  font-size 2.1rem

h2
  font-size 1.65rem
  padding-bottom .3rem
  border-bottom 1px solid $borderColor

h3
  font-size 1.35rem

a.header-anchor
  font-size 0.85em
  float left
  margin-left -0.87em
  padding-right 0.23em
  margin-top 0.125em
  opacity 0
  transform: translate(-10px)
  &:hover
    text-decoration none

code, kbd
  font-family source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace

ul, ol
  line-height 1.7
  padding-top: 6px;
  padding-bottom: 6px;

&.con-menu-vc
  ul
    padding-top: 0px;
    padding-bottom: 0px;
    li
      padding-top: 3px !important;
      padding-bottom 3px !important

.tip
  ul
    margin-left: 20px


hr
  border 0
  border-top 1px solid $borderColor
.con-api
  table
    border-collapse collapse
    margin 1rem 0

  tr
    border-top 1px solid #dfe2e5
    &:nth-child(2n)
      background-color #f6f8fa

  th, td
    border 1px solid #dfe2e5
    padding .6em 1em

.custom-layout
  padding-top $navbarHeight

.theme-container
  overflow hidden
  &.sidebar-open
    .sidebar-mask
      display: block
  &.no-navbar
    .content:not(.custom)
      h1, h2, h3, h4, h5, h6
        margin-top 1.5rem
        padding-top 0


@media (min-width: ($MQMobile + 1px))
  .theme-container.no-sidebar
    .sidebar
      display none
    .page
      padding-left 0
      padding-right: 0px !important

@require './mobile.styl'
